<script setup>
import { ref } from 'vue'
import { ElButton } from 'element-plus';
import 'element-plus/dist/index.css'

const logoff =() =>{
    window.location.href = 'http://api.cqhx.work/login'
}

</script>

<template>
    <div class="heading">
        <div class="content">
            <h2>学生管理系统</h2>
            <el-button @click="logoff" type="danger" plain round 
                class="logout-btn">
                退出登录
            </el-button>
        </div>
    </div>
    
</template>

<style scoped>
.heading {
    background-color: #f2eaea;
    padding: 10px;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: '仿宋';
    position: fixed; 
    top: 0; 
    left: 0;
    z-index: 1000; 
}

.content {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平两端对齐 */
    max-width: 1027px; /* 最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 0 20px; /* 添加左右内边距 */
}

.content h2 {
    margin: 0; /* 移除默认的外边距 */
    font-size: 31px; /* 设置标题字体大小 */
}

.logout-btn {
    margin-left: auto;
    font-size: 16px;  /* 增加字体大小 */
    padding: 12px 24px;  /* 增加内边距 */
    --el-button-size: large;  /* 使用 Element Plus 的大号按钮样式 */
}

</style>